<template>
  <div class="container">
    <img src="../assets/images/banner.jpg" alt="" class="bg">
    <div class="list">
      <div class="userinfo">
        <img src="../assets/images/avatar.png" alt="">
        <div class="username">高级前端工程师</div>

      </div>
      <div class="order">
        <div class="title">
          <span class="myorder">我的订单</span>
          <span>查看更多></span>
        </div>
        <div class="service">
          <div class="item">
            <img src="../assets//images/order.png" alt="">
            <span>商品订单</span>
          </div>
          <div class="item">
            <img src="../assets/images/giftcar.png" alt="">
            <span>礼品卡订单</span>
          </div>
          <div class="item">
            <img src="../assets/images/back.png" alt="">
            <span>退款/售后</span>
          </div>
        </div>
      </div>
      <div class="sell">
        <h1 class="title">关于售前售后服务</h1>
        <div class="sell-item">
          <img src="../assets/images/custom.png" alt="">
          <span>可与客服实时聊天或电话咨询</span>
        </div>
        <div class="sell-item">
          <img src="../assets/images/time.png" alt="">
          <span>客服工作时间为: 8:30 ~ 20:30</span>
        </div>
        <div class="sell-item">
          <img src="../assets/images/weizhi.png" alt="">
          <span>鲜花制作完毕情况下暂不支持退款</span>
        </div>
        <div class="sell-item">
          <img src="../assets/images/flower.png" alt="">
          <span>鲜花可以提前7-15天预订重大节假日不支持定时配送</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
.container{
  height: 100vh;
  overflow: scroll;
  box-sizing: border-box;
  .bg{
    width: 100%;
  }
  .list{
    padding:8px;
    .userinfo{
      margin-top:-43px;
      position: relative;
      background-color: #fff;
      border-radius: 8px;
      width: 100%;
      height: 80px;
      padding: 10px;box-sizing: border-box;
      display: flex;align-items: center;
      img{
        width: 60px;
        height: 60px;
        border-radius: 30px;
      }
      .username{
        font-size: 17px;
        color: #f3514f;
        margin-left: 8px;
        font-weight: 400;
      }
    }
    .order{
      height: 132px;
      border-radius: 8px;
      background-color: #fff;
      .title{
        padding: 10px 20px;
        margin-top: 10px;
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        .myorder{
          font-size: 16px;
          color: #444;
        }
        span{
          font-size: 12px;
          color: #ccc;
        }
      }
      .service{
        padding: 20px;
       display: flex;
       align-items: center;
       justify-content: space-between;
        .item{ 
          display: flex;
          flex-direction: column;
          align-items: center;
          img{
            width: 30px;
            height: 31px;
          }
          span{
            margin-top: 10px;
            font-size: 13px;
          }
        }
        
      }
    }
    .sell{
      padding: 10px;
      border-radius: 10px;
      background-color: #fff;
      margin-top: 10px;
      .title{
        font-size: 16px;
      }
      .sell-item{
        margin:12px 7px ;
        color: #999;
        line-height: 25px;
        display: flex;
        align-items: center;
        img{
          width: 16px;
          height: 16px;  
          margin-right: 8px;        
        }
        span{
          font-size: 12px;
        }
      }
    }
  }
}
</style>